<template>
  <div class="execution">
    <basic-container>
      <el-card class="operate-container" shadow="never">
        <el-button
          class="btn-add"
          icon="el-icon-plus"
          type="primary"
          @click="handleAddProduct()"
          size="mini"
        >
          添加
        </el-button>
      </el-card>
      <div class="table-container" style="margin-top: 10px">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
          v-loading="listLoading"
        >
          <el-table-column label="缩略图" align="center">
            <template slot-scope="scope">
              <img
                :src="scope.row.imageUrl"
                style="width: 100px; height: 50px"
              />
            </template>
          </el-table-column>

          <el-table-column label="排序" prop="sort" width="100" align="center">
          </el-table-column>
          <el-table-column label="是否显示" align="center">
            <template slot-scope="scope">
              <el-switch
                @change="handleShowStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="2"
                v-model="scope.row.isShow"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="跳转地址"
            prop="jumpUrl"
            align="center"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            align="center"
          ></el-table-column>
          <el-table-column
            label="操作人"
            align="center"
            prop="editName"
          ></el-table-column>
          <el-table-column
            label="操作时间"
            align="center"
            prop="updateTime"
          ></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="handleUpdate(scope.$index, scope.row)"
                plain
                >编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                plain
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        :before-close="close"
        width="50%"
      >
        <el-form
          :model="appAddForm"
          :rules="rules"
          ref="appAddForm"
          label-width="150px"
        >
          <el-form-item label="图片：" prop="imageUrl">
            <single-upload v-model="appAddForm.imageUrl"></single-upload>
          </el-form-item>
          <el-form-item label="排序号：" prop="sort">
            <el-input v-model="appAddForm.sort"></el-input>
          </el-form-item>
          <el-form-item label="跳转链接:" prop="jumpUrl">
            <el-input v-model="appAddForm.jumpUrl"></el-input>
          </el-form-item>
          <el-form-item label="是否显示:">
            <el-radio-group v-model="appAddForm.isShow">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="2">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('appAddForm')"
              >提交</el-button
            >
            <el-button type="info" @click="close()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import "@/styles/index.scss";
import {
  activityList,
  activityAdd,
  activityUpdate,
  activityDelete,
} from "@/api/home/banner";
import SingleUpload from "@/components/Upload/singleUpload";

const defaultAppAddForm = {
  id: null,
  imageUrl: null,
  sort: null,
  jumpUrl: null,
  isShow: 1,
};

export default {
  components: { SingleUpload },
  data() {
    return {
      tabIndex: 0,
      listQuery: {
        current: 1,
        size: 10,
      },
      list: [],
      total: 0,
      dialogVisible: false,
      listLoading: false,
      title: "",
      appAddForm: Object.assign({}, defaultAppAddForm),
      rules: {
        imageUrl: [{ required: true, message: "请上传图片", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序号", trigger: "blur" }],
        jumpUrl: [
          { required: true, message: "请输入跳转地址", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    emitInput(val) {
      this.$emit("input", val);
    },
    handleRemove(file, fileList) {
      this.emitInput("");
    },
    handlePictureCardPreview(file) {
      this.appAddForm.image = file.url;
    },
    close() {
      this.dialogVisible = false;
      this.appAddForm = Object.assign({}, defaultAppAddForm);
    },
    handleAddProduct() {
      this.dialogVisible = true;
      this.title = "添加";
    },
    handleUpdate(index, row) {
      this.dialogVisible = true;
      this.title = "编辑";
      this.appAddForm = Object.assign({}, row);
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === "编辑") {
            activityUpdate(this.appAddForm).then((result) => {
              if (result.data.code === 200) {
                this.$message({
                  message: result.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.getList();
                this.close();
              } else {
                this.$message({
                  message: result.data.msg,
                  type: "warning",
                  duration: 1000,
                });
              }
            });
          } else {
            activityAdd(this.appAddForm).then((result) => {
              if (result.data.code === 200) {
                this.$message({
                  message: result.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.getList();
                this.close();
              } else {
                this.$message({
                  message: result.data.msg,
                  type: "warning",
                  duration: 1000,
                });
              }
            });
          }
        }
      });
    },
    handleDelete(index, row) {
      this.$confirm("是否要删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        activityDelete(row.id).then((response) => {
          if (response.data.code === 200) {
            this.$message({
              message: response.data.msg,
              type: "success",
              duration: 1000,
            });
            this.getList();
          } else {
            this.$message({
              message: response.data.msg,
              type: "warning",
              duration: 1000,
            });
          }
        });
      });
    },
    handleShowStatusChange(index, row) {
      let params = {
        id: row.id,
        type: row.type,
        image: row.image,
      };
      UpdateApp(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
        this.getList();
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      activityList(this.listQuery).then((res) => {
        this.listLoading = false;
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
